<form class="row" name="editForm" >

	<!-- Edit EndPage Modal Dialog Template -->
	<script type="text/ng-template" id="editEndPageModal.html" class="edit-endpage-modal">
		<div class="modal-body">
			<div class="row">
				<div class="edit-panel col-md-6 col-xs-12 col-sm-12">
					<div class="row modal-header">
						<h2 class="modal-title hidden-md hidden-lg">{{ 'EDIT_END_PAGE' | translate }}</h2>
						<h3 class="modal-title hidden-xs hidden-sm">{{ 'EDIT_END_PAGE' | translate }}</h3>
					</div>

					<div class="row question">
						<div class="col-md-4 col-sm-12">{{ 'TITLE' | translate }}:</div>
						<div class="col-md-8 col-sm-12">
							<input class="form-control" type="text"
								   ng-model="myform.endPage.title" required>
						</div>
					</div>

					<div class="row"><br></div>

					<div class="row question">
						<div class="col-md-4 col-sm-12">{{ 'PARAGRAPH' | translate }}:</div>
						<div class="col-md-8 col-sm-12">
                                    <textarea class="form-control" type="text"
											  ng-model="myform.endPage.paragraph"></textarea>
						</div>
					</div>

					<div class="row"><br></div>

					<div class="row question">
						<div class="col-md-4 col-sm-12">{{ 'BTN_TEXT' | translate }}:</div>
						<div class="col-md-8 col-sm-12">
							<input class="form-control" type="text"
								   ng-model="myform.endPage.buttonText" required>
						</div>
					</div>

					<div class="row"><br></div>

					<div class="row">
						<div class="col-md-4 col-xs-12 field-input">{{ 'SHOW_BUTTONS' | translate }}</div>
						<div class="col-md-8 col-xs-12 field-input">
							<label class="switch-light switch-holo" onclick="">
								<input type="checkbox" ng-model="showButtons">
								<span>
									<span> {{ 'OFF' | translate }}</span>
									<span> {{ 'ON' | translate }}</span>
									<a></a>
								</span>
							</label>
						</div>
					</div>

					<div class="row options buttons" ng-if="showButtons">
						<div class="col-md-3 col-xs-12">{{ 'BUTTONS' | translate }}:</div>
						<div class="col-md-9 col-xs-12">
							<div ng-repeat="button in myform.endPage.buttons track by button._id" class="row" style="padding-bottom:1em;">

								<div class="col-xs-5">
									<span>{{ 'BUTTON_TEXT' | translate }}</span>
									<input type="text"
										   name="{{button.text}}_buttonText_startPage"
										   ng-model="button.text"
										   value="{{button.text}}"
										   placeholder="{{ 'BUTTON_TEXT' | translate }}">
								</div>


								<div class="col-xs-5">
									<span>{{ 'BUTTON_LINK' | translate }}</span>
									<input type="text"
										   name="{{button.url}}_url_startPage"
										   ng-model="button.url"
										   value="{{button.url}}"
										   placeholder="http://aeouaou.com/aoeuoa">
								</div>

								<div class="col-xs-2">
									<a class="btn btn-danger btn-mini right" type="button" ng-click="deleteButton(button)">
										<i class="fa fa-trash-o"></i>
									</a>
								</div>
							</div>

							<div class="row"><br></div>
							<div class="row">
								<button class="btn btn-primary btn-small col-md-offset-6 col-md-6 col-sm-4 col-sm-offset-8 col-xs-4 col-xs-offset-8" type="button" ng-click="addButton()">
									<i class="icon-plus icon-white"></i> {{ 'ADD_BUTTON' | translate }}
								</button>
							</div>
						</div>
					</div>

					<div class="modal-footer row">
						<button type="submit" ng-click="saveEndPage()" class="btn btn-signup btn-rounded">
							{{ 'SAVE_START_PAGE' | translate }}
						</button>

						<button ng-click="cancel()" class="btn btn-secondary btn-rounded">
							{{ 'CANCEL' | translate }}
						</button>
					</div>
				</div>

				<div class="preview-field-panel col-md-6 hidden-sm hidden-xs">
					<form class="public-form">

						<div class="row">
							<div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
								<h1 style="font-weight: 400; font-size: 25px;">
									{{myform.endPage.title}}
								</h1>
							</div>
							<div class="col-xs-10 col-xs-offset-1 text-center" style="overflow-wrap: break-word;">
								<p style="color: grey; font-weight: 100; font-size: 16px;">
									{{myform.endPage.paragraph}}
								</p>
							</div>
						</div>

						<div class="row form-actions text-center" style="padding: 5px 25px 5px 25px;">
							<button ng-click="reloadForm()" class="btn" type="button"
									ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}">
			<span style="font-size: 1.6em;">
			{{myform.endPage.buttonText}}
			</span>
							</button>
						</div>
						<div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;">
							<p ng-repeat="button in myform.endPage.buttons" class="text-center" style="display:inline;">
								<button class="btn" style="background-color:rgb(156, 226, 235)" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}">
									<a href="{{button.url}}"
									   style="font-size: 1.6em; text-decoration: none;"
									   ng-style="{'color':button.color}">
										{{button.text}}
									</a>
								</button>
							</p>
						</div>

					</form>
				</div>
			</div>

		</div>
	</script>

	<!-- Edit StartPage Modal Dialog Template -->
	<script type="text/ng-template" id="editStartPageModal.html" class="edit-startpage-modal">
		<div class="modal-body">
			<div class="row">
				<div class="edit-panel col-md-6 col-xs-12 col-sm-12">
					<div class="row modal-header">
						<h2 class="modal-title hidden-md hidden-lg">{{ 'EDIT_START_PAGE' | translate }}</h2>
						<h3 class="modal-title hidden-xs hidden-sm">{{ 'EDIT_START_PAGE' | translate }}</h3>
					</div>

					<div class="row question">
						<div class="col-md-4 col-sm-12">{{ 'INTRO_TITLE' | translate }}:</div>
						<div class="col-md-8 col-sm-12">
							<input class="form-control" type="text"
								   ng-model="myform.startPage.introTitle"
								   name="introTitleStartPage" required>
						</div>
					</div>

					<div class="row"><br></div>

					<div class="row question">
						<div class="col-md-4 col-sm-12">{{ 'INTRO_PARAGRAPH' | translate }}:</div>
						<div class="col-md-8 col-sm-12">
                                    <textarea class="form-control" type="text"
											  ng-model="myform.startPage.introParagraph"
											  name="introParagraphStartPage"></textarea>
						</div>
					</div>

					<div class="row"><br></div>

					<div class="row question">
						<div class="col-md-4 col-sm-12">{{ 'INTRO_BTN' | translate }}:</div>
						<div class="col-md-8 col-sm-12">
							<input class="form-control" type="text"
								   ng-model="myform.startPage.introButtonText"
								   name="introButtonText" required>
						</div>
					</div>

					<div class="row"><br></div>

					<div class="row">
						<div class="col-md-4 col-xs-12 field-input">{{ 'SHOW_BUTTONS' | translate }}</div>
						<div class="col-md-8 col-xs-12 field-input">
							<label class="switch-light switch-holo" onclick="">
								<input type="checkbox" ng-model="showButtons">
								<span>
									<span> {{ 'OFF' | translate }}</span>
									<span> {{ 'ON' | translate }}</span>
									<a></a>
								</span>
							</label>
						</div>
					</div>

					<div class="row options buttons" ng-if="showButtons">
						<div class="col-md-3 col-xs-12">{{ 'BUTTONS' | translate }}:</div>
						<div class="col-md-9 col-xs-12">
							<div ng-repeat="button in myform.startPage.buttons track by button._id" class="row" style="padding-bottom:1em;">

								<div class="col-xs-5">
									<span>{{ 'BUTTON_TEXT' | translate }}</span>
									<input type="text"
										   name="{{button.text}}_buttonText_startPage"
										   ng-model="button.text"
										   value="{{button.text}}"
										   placeholder="{{ 'BUTTON_TEXT' | translate }}">
								</div>


								<div class="col-xs-5">
									<span>{{ 'BUTTON_LINK' | translate }}</span>
									<input type="text"
										   name="{{button.url}}_url_startPage"
										   ng-model="button.url"
										   value="{{button.url}}"
										   placeholder="http://aeouaou.com/aoeuoa">
								</div>

								<div class="col-xs-2">
									<a class="btn btn-danger btn-mini right" type="button" ng-click="deleteButton(button)">
										<i class="fa fa-trash-o"></i>
									</a>
								</div>
							</div>

							<div class="row"><br></div>
							<div class="row">
								<button class="btn btn-primary btn-small col-md-offset-6 col-md-6 col-sm-4 col-sm-offset-8 col-xs-4 col-xs-offset-8" type="button" ng-click="addButton()">
									<i class="icon-plus icon-white"></i> {{ 'ADD_BUTTON' | translate }}
								</button>
							</div>
						</div>
					</div>

					<div class="modal-footer row">
						<button type="submit" ng-click="saveStartPage()" class="btn btn-signup btn-rounded">
							{{ 'SAVE_START_PAGE' | translate }}
						</button>

						<button ng-click="cancel()" class="btn btn-secondary btn-rounded">
							{{ 'CANCEL' | translate }}
						</button>
					</div>
				</div>

				<div class="preview-field-panel col-md-6 hidden-sm hidden-xs">
					<form class="public-form">

						<div class="field row">
							<div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
								<h1>{{myform.startPage.introTitle}}</h1>
							</div>
							<div class="col-xs-10 col-xs-offset-1 text-left" style="overflow-wrap: break-word;">
								<p style="color:#ddd;">{{myform.startPage.introParagraph}}</p>
							</div>
						</div>
						<div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;">
							<p ng-repeat="button in myform.startPage.buttons" class="text-center" style="display:inline;">
								<button class="btn btn-info" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}">
									<a href="{{button.url}}" style="font-size: 1.6em; text-decoration: none; color: inherit;" >
										{{button.text}}
									</a>
								</button>
							</p>
						</div>
						<div class="row form-actions">
							<button class="btn btn-info btn btn-info col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3" type="button">
										<span style="color:white; font-size: 1.6em; text-decoration: none;">
											{{myform.startPage.introButtonText}}
										</span>
							</button>
						</div>

					</form>
				</div>
			</div>

		</div>
	</script>

	<!-- Edit Field Modal Dialog Template -->
	<script type="text/ng-template" id="editFieldModal.html" class="edit-field-modal">
		<div class="modal-body">
			<div class="row">
				<div class="edit-panel col-md-6 col-xs-12 col-sm-12">
					<div class="row modal-header">
						<h2 class="modal-title hidden-md hidden-lg">{{ 'EDIT_FIELD' | translate }}</h2>
						<h3 class="modal-title hidden-xs hidden-sm">{{ 'EDIT_FIELD' | translate }}</h3>
					</div>
					<div class="row question">
						<div class="col-md-12 bold">{{ 'QUESTION_TITLE' | translate }}</div>
						<div class="col-md-12">
							<input type="text" class="form-control" ng-model="field.title" name="title{{field._id}}" value="{{field.title}}" required></div>
					</div>

					<div class="row"><br></div>

					<div class="row description" ng-hide="showRatingOptions()">
						<div class="col-md-12 bold">{{ 'QUESTION_DESCRIPTION' | translate }}</div>
						<div class="col-md-12">
							<textarea type="text" class="form-control" ng-model="field.description" name="description{{field._id}}"value="{{field.description}}"></textarea>
						</div>
					</div>

					<div class="row" ng-show="showAddOptions()"><br></div>
					<div class="row options" ng-if="showAddOptions()">
						<div class="col-md-4 col-xs-12">{{ 'OPTIONS' | translate }}</div>
						<div class="col-md-8 col-xs-12">
							<div ng-repeat="option in field.fieldOptions track by option.option_id" class="row">
								<input type="text" name="{{option.option_value}}{{field._id}}" ng-model="option.option_value" class="col-xs-5">

								<a class="btn btn-danger btn-mini right" type="button" ng-click="deleteOption(option)" class="col-xs-3">
									<i class="fa fa-trash-o"></i>
								</a>
							</div>
							<div class="row">
								<button class="btn btn-primary btn-small col-md-offset-0 col-md-6 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-6" type="button" ng-click="addOption()">
									<i class="icon-plus icon-white"></i> {{ 'ADD_OPTION' | translate }}
								</button>
							</div>
						</div>
					</div>

					<div class="row" ng-show="showRatingOptions()"><br></div>
					<div class="row" ng-if="showRatingOptions()">
						<div class="col-md-9 col-sm-9">{{ 'NUM_OF_STEPS' | translate }}</div>
						<div class="col-md-3 col-sm-3">
							<input style="width:100%" type="number"
								   min="1" max="10"
								   ng-model="field.ratingOptions.steps"
								   name="ratingOptions_steps{{field._id}}"
								   ng-value="{{field.ratingOptions.steps}}"
								   required>
						</div>
						<br>
						<div class="col-md-5 col-sm-9">{{ 'SHAPE' | translate }}:</div>
						<div class="col-md-7 col-sm-3">
							<select style="width:100%" ng-model="field.ratingOptions.shape"
									value="{{field.ratingOptions.steps}}"
									name="ratingOptions_shape{{field._id}}" required>
								<option ng-repeat="shapeType in validShapes"
										value="{{shapeType}}">
									{{select2FA[shapeType]}}
								</option>
							</select>
						</div>
					</div>

					<div class="row"><br></div>

					<div class="row">
						<div class="col-md-4 col-xs-12 field-title">{{ 'REQUIRED_FIELD' | translate }}</div>
						<div class="col-md-8 col-xs-12 field-input">
							<label class="switch-light switch-holo" onclick="">
								<input type="checkbox" ng-model="field.required">
								<span class="large-3 columns float-left">
									<span> {{ 'OFF' | translate }}</span>
									<span> {{ 'ON' | translate }}</span>
									<a></a>
								</span>
							</label>
						</div>
					</div>

					<div class="row">
						<div class="col-md-4 col-xs-12 field-input">{{ 'LOGIC_JUMP' | translate }}</div>
						<div class="col-md-8 col-xs-12 field-input">
							<label class="switch-light switch-holo" onclick="">
								<input type="checkbox" ng-model="field.logicJump.enabled">
								<span>
									<span> {{ 'OFF' | translate }}</span>
									<span> {{ 'ON' | translate }}</span>
									<a></a>
								</span>
							</label>
						</div>
					</div>
					<div class="row question" ng-if="field.logicJump.enabled"">
						<div class="col-md-4 col-sm-12">

							<b> {{ 'IF_THIS_FIELD' | translate }} </b>
						</div>
						<div class="col-md-4 col-sm-12">
							<select style="width:100%" ng-model="field.logicJump.expressionString"
									value="{{field.logicJump.expressionString}}"
									name="logicjump_expressionString{{field._id}}">
								<option value="field == static">

									{{ 'IS_EQUAL_TO' | translate }}
								</option>
								<option value="field != static">

									{{ 'IS_NOT_EQUAL_TO' | translate }}
								</option>

								<option value="field > static" ng-if-start="field.fieldType === 'number' || field.fieldType === 'rating' || field.fieldType === 'number'">

									{{ 'IS_GREATER_THAN' | translate }}
								</option>
								<option value="field >= static">

									{{ 'IS_GREATER_OR_EQUAL_THAN' | translate }}
								</option>
								<option value="field < static">

									{{ 'IS_SMALLER_THAN' | translate }}
								</option>
								<option value="field <= static" ng-if-end>

									{{ 'IS_SMALLER_OR_EQUAL_THAN' | translate }}
								</option>

								<option value="field contains static" ng-if-start="field.fieldType !== 'number' && field.fieldType !== 'rating' && field.fieldType !== 'number'">

									{{ 'CONTAINS' | translate }}
								</option>
								<option value="field !contains static">

									{{ 'DOES_NOT_CONTAINS' | translate }}
								</option>
								<option value="field ends static">

									{{ 'ENDS_WITH' | translate }}
								</option>
								<option value="field !ends static">

									{{ 'DOES_NOT_END_WITH' | translate }}
								</option>
								<option value="field starts static">

									{{ 'STARTS_WITH' | translate }}
								</option>
								<option value="field !starts static" ng-if-end>

									{{ 'DOES_NOT_START_WITH' | translate }}
								</option>
							</select>
						</div>
						<div class="col-md-4 col-sm-12">
							<input type="text" ng-model="field.logicJump.valueB"/>
						</div>
						<div class="col-md-2">

							<b>{{ 'THEN_JUMP_TO' | translate }}</b>
						</div>
						<div class="col-md-10">
							<select style="width:100%" ng-model="field.logicJump.jumpTo"
									value="{{field.logicJump.jumpTo}}"
									name="logicjump_jumpTo{{field._id}}">
								<option ng-repeat="jump_field in myform.form_fields"
										value="{{jump_field._id}}">
									{{jump_field.title}}
								</option>
							</select>
						</div>
					</div>
					<div class="modal-footer row">
						<button type="submit" ng-click="saveField()" class="btn btn-signup btn-rounded">
							{{ 'SAVE_FIELD' | translate }}
						</button>

						<button ng-click="cancel()" class="btn btn-secondary btn-rounded">
							{{ 'CANCEL' | translate }}
						</button>
					</div>
				</div>

				<div class="preview-field-panel col-md-6 hidden-sm hidden-xs">
					<form class="public-form">
						<field-directive field="field" validate="false" class="preview-field">
						</field-directive>
					</form>
				</div>
			</div>

		</div>
	</script>

	<!-- Add Fields Element -->
    <div class="col-xs-2 col-sm-4 add-field">

        <div class="row add-field-title">
            <h3 class="col-md-12 hidden-sm hidden-xs">{{ 'ADD_FIELD_LG' | translate }}</h3>
            <h4 class="col-sm-12 hidden-xs hidden-md hidden-lg">{{ 'ADD_FIELD_MD' | translate }}</h4>
            <h5 class="col-xs-12 hidden-sm hidden-md hidden-lg">{{ 'ADD_FIELD_SM' | translate }}</h5>
        </div>
        <div class="panel-group row" class="draggable" ng-model="addField.types">

            <div class="col-xs-12 col-sm-12 col-md-6" ng-repeat="type in addField.types" style="padding-top:7.5px;">
                <div class="panel panel-default" style="background-color:#f5f5f5;">
                    <div class="panel-heading" ng-click="addNewField(type.name)" style="cursor: pointer; font-size:12px; padding-left: 10px; padding-right: 10px;">
                        <span>
                            <field-icon-directive type-name="{{type.name}}">
                            </field-icon-directive>
                        </span>

                        <span class="hidden-xs" style="padding-left:0.3em;">	{{type.value}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

	<!-- Current Fields Element -->
	<div class="col-xs-10 col-sm-8 current-fields">
		<!-- Start Page -->
        <div class="row" ng-if="myform.startPage.showStart">
            <div class="col-sm-12">
                <div class="panel panel-default startPage" ng-click="openEditStartPageModal()">
                    <div class="panel-heading">
                        <h4 class="text-center">
                            {{ 'WELCOME_SCREEN' | translate }}
                        </h4>
                    </div>
				</div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12"><hr></div>
        </div>

		<!-- Form Fields -->
        <div class="row dropzoneContainer">

            <div class="panel-group dropzone col-xs-12" ui-sortable="sortableOptions" ng-model="myform.form_fields">

            	<div class="col-xs-12 field-row" ng-repeat="field in myform.form_fields track by $id($index)" ng-if="!field.deletePreserved">
	            	<div class="col-xs-10">
			            <div class="panel panel-default" ng-click="openEditModal(field, true, $index)">
			                <div class="panel-heading">
								<div class="row">
									<span class="col-xs-1" ng-switch="field.fieldType">
										<field-icon-directive type-name="{{field.fieldType}}"></field-icon-directive>
									</span>
									<span class="col-xs-11">
										{{field.title}}
										<span ng-show="field.required">*</span>
									</span>
								</div>
			                </div>
			            </div>
			        </div>
		            <div class="col-xs-1 box">
			            <div class="panel tool-panel panel-default">
			                <div class="panel-heading" style="padding: 10px 10px;" ng-click="deleteField($index)">
			                    <span class="text-center">
			                        <a href="" class="fa fa-trash-o"></a>
			                    </span>
			                </div>
			            </div>
		            </div>

		            <div class="col-xs-1 box">
			            <div class="panel tool-panel panel-default">
		                    <div class="panel-heading" style="padding: 10px 10px;" ng-click="duplicateField($index)">
		                        <span class="text-center">
		                            <a href="" class="fa fa-files-o"></a>
		                        </span>
		                    </div>
		                </div>
	                </div>
		        </div>

		        <div class="col-xs-12 field-row">
		        	<div class="col-xs-12" style="padding-right: 5px;">
		                <div class="panel panel-default" style="border-style: dashed; border-color: #a9a9a9;">
		                    <div class="panel-heading">
		                        <h4 class="panel-title text-center" style="color: #a9a9a9;">
									{{ 'CLICK_FIELDS_FOOTER' | translate }}
		                        </h4>
		                    </div>
		                </div>
	                </div>
                </div>

                <hr>
            </div>
        </div>

		<!-- End Page -->
		<div class="row" ng-if="myform.endPage.showEnd">
			<div class="col-sm-12">
				<div class="panel panel-default startPage" ng-click="openEditEndPageModal()">
					<div class="panel-heading">
						<h4 class="text-center">
							{{ 'END_SCREEN' | translate }}
						</h4>
					</div>
				</div>
			</div>
		</div>
    </div>

</form>
